<template>
  <div id="PayRollSetSuccess">
    <div class="title"></div>
    <div class="content">
      <div id="payRollCenter" class="pay_roll_center">
        <div class="title" v-if="submitPayRoll">Run Payroll : {{submitPayRoll.scheduleName?submitPayRoll.scheduleName:""}}<span v-touch-ripple class="close_icon" @click="$router.back()">X</span></div>
        <div class="d_panel_content" v-if="submitPayRoll">
          <div class="d_panel_top">
            <p class="main_title">Got it! Your payroll is all set.</p>
            <p class="tip">We've used your info to create paychecks for your employees</p>
            <p class="info">
              {{submitPayRoll.payCheckCount?submitPayRoll.payCheckCount:""}} paycheck to write<br>
              Deliver checks to your employees by {{submitPayRoll.payDate?submitPayRoll.payDate:""}}
            </p>
          </div>

          <div class="table_content">
            <el-table v-if="submitPayRollList" ref="payTable"
                      :data="submitPayRollList"
                      border
                      emptyText="No Data"
                      @selection-change=""
                      @sort-change=""
                      @row-dblclick=""
                      @selection-change = "">
              <!--<div slot="empty">
                <i class="iconfont" style="font-size: 30px;vertical-align:middle;margin-right: 4px">&#xe619;</i> no Data !
              </div>-->
              <template v-for="(value,key) in personTableColumn"  >
                <el-table-column :key="value.name"
                                 :show-overflow-tooltip = 'true'
                                 :prop="value.name"
                                 :label="value.title"
                                 height="auto"
                                 :min-width="value.width?value.with:100"
                                 :sortable = "value.isSortable ? 'custom':false"
                                 inline-template>
                  <div>
                <span v-if="value.name=='name'">
                    {{row[value.name]?row[value.name]:""}}
                </span>
                    <span v-else-if="value.name=='payRate'">
                    {{row.unit?row.unit:""}}
                    {{row[value.name]?''+row[value.name]:""}}
                    {{row.payRange?'/ '+row.payRange:""}}
                </span>
                    <span v-else>
                  {{ row[value.name]}}
                </span>
                  </div>
                </el-table-column>
              </template>
            </el-table>
            <!--分页-->
            <div v-show="submitPayRollList" style="text-align:right;margin-top:10px" v-if="submitPayRollListPb&&submitPayRollListPb.pageDataCount>1">
              <el-pagination
                @size-change="tableChangePageSize"
                @current-change="tableChangePage"
                :current-page='parseInt(submitPayRollListPb.pageNo)'
                :page-sizes="[5, 10, 20, 30]"
                :page-size='parseInt(submitPayRollListPb.pageSize)'
                layout="total, sizes, prev, pager, next, jumper"
                :total='parseInt(submitPayRollListPb.pageDataCount)'>
              </el-pagination>
            </div>
            <div class="btn_group">
              <el-button type="primary" @click="submit">Finish Payroll</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dPanel from '../../components/common/Panel.vue';

  export default {
    components:{
      dPanel
    },
    data:function(){
      return{
        payChartColor:['#3fa4eb','#00c9c6','#ffb900'],
        pieChart:null,
        personTableColumn:[
          {title:'NAME',name:'name'},
          {title:'TOTAL HOURS',name:'totalPay'},
          {title:'TOTAL PAY',name:'totalPay'},
          {title:'EMPLOYEE TAXES AND DEDUCTIONS',name:'cost'},
          {title:'NET PAY',name:'netPay'},
        ],
        page:{
          "pageNo":"1",
          "pageSize":"5"
        }
      }
    },
    computed:{
      /**
       * 员工表格数据
       */
      submitPayRollList(){
        return this.$store.getters.submitPayRollList;
      },
      /**
       * 员工表格分页数据
       */
      submitPayRollListPb(){
        return this.$store.getters.submitPayRollListPb;
      },
      submitPayRoll(){
        return this.$store.getters.submitPayRoll;
      },
    },
    watch:{
    },
    created:function () {
      this.init()
    },
    activated:function () {
      //this.init()
    },
    mounted:function(){
      this.$nextTick(function () {
      });
    },
    methods:{
      init:function () {
        this.getsubmitPayRollList();
      },
      getsubmitPayRollList(){
        var param = Object.assign({},this.page);
        param.personIdStr = this.$route.query.personIds;
        this.$store.dispatch("getSubmitPayRoll",param);
      },
      tableChangePageSize(pageSize){
        this.page.pageSize = pageSize;
        this.getPersons();
      },
      tableChangePage(pageNo){
        this.page.pageNo = pageNo;
        this.getPersons();
      },
      submit(){
        this.$router.push('/payRoll/payRollCenter');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  rel="stylesheet/scss"  type="text/css" lang="scss" scoped>

  @import "../../assets/css/variable";
  .pay_roll_center{
    .title {
      line-height: 40px;
      background-color: #ddd;
      padding: 0 12px;
      .close_icon {
        float: right;;
        cursor: pointer;
      }
    }
    .d_panel_content{
      .d_panel_top{
        padding: 10px 30px;
        >.main_title{
          line-height: 40px;
          margin-top: 20px;
          font-size: 30px;
        }
        >.tip{
          color: $activeColor;
        }
        >.info{
          margin: 30px 0;
          line-height: 30px;
          font-size: 16px;
        }

        }


      /*table ================start*/
      .table_content{
        padding: 0 20px;
        margin-bottom: 20px;
        .table_operator{
          margin-bottom: 10px;
        }

      }
      .btn_group{
        margin-top: 10px;
        line-height: 50px;
        text-align: right;
      }
      /*table ================end*/
    }
  }
</style>
